<template>
  <div>
    <div class="cs-filter-container">
      <el-input
        v-model.trim="listQuery.userId"
        clearable
        placeholder="用户ID"
        style="width: 90px"
      />
      <el-select
        v-model="gender"
        placeholder="性别"
        style="width: 80px"
        @change="onGenderChange"
      >
        <el-option label="全部" value="全部" />
        <el-option label="女" value="女" />
      </el-select>

      <el-select
        v-model="listQuery.certificationStatus"
        clearable
        placeholder="认证类型"
      >
        <el-option label="未认证" :value="0" />
        <el-option label="真人认证" :value="1" />
        <el-option label="女神认证" :value="2" />
      </el-select>

      <el-input
        v-model="listQuery.minRate"
        clearable
        placeholder="最小鉴黄分数"
        type="number"
        style="width: 150px"
      ></el-input>
      -
      <el-input
        v-model="listQuery.maxRate"
        clearable
        placeholder="最大鉴黄分数"
        type="number"
        style="width: 150px"
      ></el-input>
      <el-select
        v-model="listQuery.valid"
        clearable
        placeholder="已阅/未阅"
        style="width: 120px"
      >
        <el-option label="未阅" value="0" />
        <el-option label="已阅" value="1" />
      </el-select>
      <el-select
        v-model="listQuery.orderBy"
        clearable
        placeholder="排序列"
        style="width: 120px"
      >
        <el-option label="创建时间" value="create_time" />
        <el-option label="更新时间" value="update_time" />
        <el-option label="发起者id" value="from_user" />
        <el-option label="接收者id" value="to_user" />
      </el-select>
      <el-select
        v-model="listQuery.orderType"
        clearable
        placeholder="排序方式"
        style="width: 120px"
      >
        <el-option label="倒序" value="DESC" />
        <el-option label="正序" value="ASC" />
      </el-select>
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="创建起始时间"
        end-placeholder="创建结束时间"
        value-format="yyyy-MM-dd"
        style="width: 300px"
        @change="daterangeChangedTimestamp"
      />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >
        重置
      </el-button>
      <!-- <el-link type="primary" @click="advanceSearchVisible = true"
        >高级搜索</el-link
      > -->
    </div>
    <!-- <el-dialog :visible.sync="advanceSearchVisible">
      <el-form label-width="100px">
        <el-form-item label="是否已阅：">
          <el-select
            v-model="listQuery.valid"
            clearable
            placeholder="已阅/未阅"
            style="width: 120px"
          >
            <el-option label="未阅" value="0" />
            <el-option label="已阅" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序列：">
          <el-select
            v-model="listQuery.orderBy"
            clearable
            placeholder="排序列"
            style="width: 120px"
          >
            <el-option label="创建时间" value="create_time" />
            <el-option label="更新时间" value="update_time" />
            <el-option label="发起者id" value="from_user" />
            <el-option label="接收者id" value="to_user" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序方式：">
          <el-select
            v-model="listQuery.orderType"
            clearable
            placeholder="排序方式"
            style="width: 120px"
          >
            <el-option label="倒序" value="DESC" />
            <el-option label="正序" value="ASC" />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="advanceSearchVisible = false">取消</el-button>
        <el-button @click="onAdvanceSearch" type="primary">确定</el-button>
      </span>
    </el-dialog> -->
    <div style="margin: 10px 0">
      <el-button type="warning" @click="onHandleAll()">批量审阅</el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        row-key="chatId"
        :data="list"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column align="center" label="频道ID" width="70">
          <template slot-scope="{ row }">
            <a
              target="_blank"
              :href="row.chatId | filterHref('/anchor/video-thumb-all?id=')"
            >
              查看全部
            </a>
          </template>
        </el-table-column>
        <el-table-column align="center" label="发起者" width="70">
          <template slot-scope="{ row }">
            <a
              target="_blank"
              :href="row.fromUser | filterHref('/account/account-list?id=')"
            >
              <TooptipsCom :user-id="row.fromUser" v-if="row.fromUser" />
            </a>
            <el-button
              v-if="!row.banedStatus"
              type="danger"
              size="mini"
              @click="onForbid(row.fromUser)"
            >
              封号
            </el-button>
            <span>{{ userAddress[row.fromUser] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="发起者截图" min-width="140">
          <template slot-scope="{ row }">
            <image-tooltip :image-id="row.fromUrl">
              <img
                v-if="
                  row.fromGender > (gender === '全部' ? 0 : 1) && row.fromUrl
                "
                slot="img"
                :src="row.fromUrl + '?x-oss-process=image/resize,w_175'"
                style="cursor: pointer; width: 100px"
                title="点击放大"
                @click="zoomImage(row.fromUrl)"
              />
            </image-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" label="接收者" width="70">
          <template slot-scope="{ row }">
            <TooptipsCom :user-id="row.toUser" v-if="row.toUser" />
            <el-button
              v-if="!row.banedStatus"
              type="danger"
              size="mini"
              @click="onForbid(row.toUser)"
            >
              封号
            </el-button>
            <span>{{ userAddress[row.toUser] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="接收者截图" min-width="140">
          <template slot-scope="{ row }">
            <image-tooltip :image-id="row.toUrl">
              <img
                v-if="row.toGender > (gender === '全部' ? 0 : 1) && row.toUrl"
                slot="img"
                :src="row.toUrl + '?x-oss-process=image/resize,w_175'"
                style="cursor: pointer; width: 100px"
                title="点击放大"
                @click="zoomImage(row.toUrl)"
              />
            </image-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" label="认证类型" prop="createTime">
          <template slot-scope="{ row }">{{
            certificationItems[row.certificationStatus]
          }}</template>
        </el-table-column>
        <el-table-column align="center" label="创建时间" prop="createTime">
          <template slot-scope="{ row }">{{
            row.createTime | parseTime
          }}</template>
        </el-table-column>
        <el-table-column align="center" label="最高鉴黄分数" width="100">
          <template slot-scope="{ row }">{{ row.maxRate }}</template>
        </el-table-column>
        <el-table-column align="center" label="操作" fixed="right">
          <template slot-scope="{ row }">
            <el-button
              v-if="row.valid === 0"
              type="primary"
              size="mini"
              @click="onVerify([row])"
            >
              已阅
            </el-button>
            <el-button
              v-if="!row.banedStatus"
              type="danger"
              size="mini"
              @click="onDelImage(row)"
            >
              删除图片
            </el-button>
            <el-button type="danger" @click="reviewAll(row)" size="mini">
              一键审阅女用户
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChangeOffset"
      />
    </div>
    <ImageViewer :visible.sync="showImage" :url="videoUrl" :type="'image'" />
    <DialogForbidAccount
      :visible.sync="dialogVisible"
      :user-ids="forbidAccounts"
      :forbid-type="'2'"
      :hours="72"
      :banned-type="['BANNED_ANCHOR_TAB', 'BANNED_RANDOM_CHAT_ASSIGNED']"
      :reason="
        'IMPORTANT \n' +
          '1：Say hi to who chat with you.even you don\'t speak english.（show them you are not record video)\n' +
          '2：Don\'t Cover camera,wear mask ,or complete Dark.Please show yourself in video call\n' +
          '3: sexy! still beautiful ,still sexy\n' +
          '4: goegerous is means hot sexy ladies. if not we will  downgrade to verified\n' +
          '5:don\'t do auto match video call\n' +
          'If you want to know more,and earn more please contact us. \n' +
          ' telegram is +63 9162478439. \n' +
          'facebook messenger is https://www.facebook.com/qiang.chen.549436 \n' +
          'email is bitrober@gmail.com .'
      "
      @onSuccess="doSearch"
    />
  </div>
</template>

<script>
import TablePagination from '@/components/TablePagination'
import ImageViewer from '@/components/ImageViewer'
import DialogForbidAccount from '@/views/account/components/DialogForbidAccount'

import {
  xhrVideoThumbList,
  xhrVideoThumbDelete,
  xhrVideoThumbVerify,
  xhrVideoUserVerify
} from '@/api/anchor'
import AnchorMixin from '@/views/anchor/mixin'
export default {
  name: 'VideoThumbs',
  components: { TablePagination, ImageViewer, DialogForbidAccount },
  mixins: [AnchorMixin],
  data() {
    return {
      list: [],
      total: 0,
      gender: '女',
      listQuery: {
        page: 1,
        limit: 50,
        isBlack: null,
        isFace: null,
        userId: null,
        certificationStatus: null,
        orderBy: 'create_time',
        orderType: 'DESC',
        minRate: '',
        maxRate: ''
      },
      certificationItems: {
        0: '未认证',
        1: '真人认证',
        2: '女神认证'
      },
      forbidAccounts: null,
      dialogVisible: false,
      userAddress: {},
      multipleSelection: [],
      daterangeValue: '',
      showImage: false,
      videoUrl: '',
      selectRows: [],
      listLoading: false,
      advanceSearchVisible: false
    }
  },

  created() {
    this.doSearch()
    setInterval(() => {
      this.doSearch()
    }, 1000 * 60)
  },
  methods: {
    onAdvanceSearch() {
      this.doSearch()
      this.advanceSearchVisible = false
    },
    doSearch() {
      this.listLoading = true
      if (!this.validateParams(this.listQuery)) {
        return
      }
      const params = Object.assign({}, this.listQuery)
      if (params.maxRate) {
        params.maxRate = Math.min(params.maxRate, 100)
      }
      if (params.minRate) {
        params.minRate = Math.max(params.minRate, 0)
        if (params.maxRate) {
          params.minRate = Math.min(params.minRate, params.maxRate)
        }
      }
      if (!params.orderBy) {
        params.orderBy = 'create_time'
      }
      if (!params.orderType) {
        params.orderBy = 'DESC'
      }
      xhrVideoThumbList(params)
        .then(resp => {
          this.list = resp.data.list
          this.total = resp.data.count
          if (resp.data.userAddress) {
            this.userAddress = resp.data.userAddress
          }
          this.listLoading = false
        })
        .catch(err => {
          this.$message.error(err)
          this.listLoading = false
        })
    },
    zoomImage(url) {
      this.showImage = true
      this.videoUrl = url
    },
    onGoDetail(id) {
      this.$router.push('/anchor/video-thumb-all?id=' + id)
    },
    onClickUser(uid) {
      this.$router.push('/account/account-list?id=' + uid)
    },

    onGenderChange(g) {
      this.$forceUpdate()
    },

    onVerify(rows) {
      const ids = []
      for (const i in rows) {
        ids.push(rows[i].chatId)
      }
      xhrVideoThumbVerify({
        ids: ids.join(',')
      })
        .then(resp => {
          this.$message.success('审阅成功')
          for (const i in rows) {
            rows[i].valid = 1
          }
          this.$forceUpdate()
        })
        .catch(e => {
          this.$forceUpdate()
        })
    },

    onHandleAll() {
      this.onVerify(this.multipleSelection)
    },

    reviewAll(row) {
      let userId = null
      if (row.fromGender === 2) {
        userId = row.fromUser
      } else if (row.toGender === 2) {
        userId = row.toUser
      }
      if (!userId) {
        this.$message.warning('没有识别到女用户id')
        return null
      }
      xhrVideoUserVerify({
        userId: userId
      })
        .then(resp => {
          this.$message.success('审阅成功')
          this.doSearch()
        })
        .catch(e => {})
    },

    onDelImage(row) {
      this.$confirm('确定删除' + row.chatId + '的图片?').then(() => {
        xhrVideoThumbDelete({
          id: row.chatId
        })
          .then(resp => {
            this.$message.success('操作成功')
            this.doSearch()
          })
          .catch(err => {
            this.$message.error(err)
          })
      })
    },
    sortChange(column, prop, order) {
      console.log('sortChange')
    },
    onForbid(userId) {
      this.forbidAccounts = userId
      this.dialogVisible = true
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>
<style lang="scss" scoped>
.video-wrap {
  position: relative;
  video {
    width: 100%;
  }
  &::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
}
</style>
